<template>
  <view>
    <view class="containar">
      <view class="avatarUrl">
        <button type="balanced" open-type="chooseAvatar" plain="true" @chooseavatar="onChooseavatar">
          <image :src="avatarUrl" class="refreshIcon"/>
        </button>
      </view>
      <view class="nickname">
        <text>昵称：</text>
        <input type="nickname" class="weui-input" :value="nickName" @blur="bindblur" placeholder="请输入昵称"
               @input="bindNickName"/>
      </view>
      <view class="nickname">
        <text>手机号：</text>
        <input type="phoneNum" class="weui-input" :value="phoneNum" placeholder="请输入手机号"
               @input="bindPhoneNum"/>
      </view>
      <view class="btn">
        <view class="btn-sub" @click="onSubmit">保存</view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/api/request.js';

export default {
  data() {
    return {
      avatarUrl: "",
      nickName: '',
      phoneNum: '',
      profileUrl: ''
    }
  },
  methods: {
    bindblur(e) {
      this.nickName = e.detail.value;
    },
    bindNickName(e) {
      this.nickName = e.detail.value;
    },
    bindPhoneNum(e) {
      this.phoneNum = e.detail.value;
    },
    onChooseavatar(e) {
      let self = this;
      let {
        avatarUrl
      } = e.detail;
      uni.showLoading({
        title: '上传中'
      });
      uni.uploadFile({
        url: `https://housedada.cn/wxUser/uploadProfile`,
        filePath: avatarUrl,
        name: 'file',
        header: {
          token: uni.getStorageSync("miuUserInfo").openid
        },
        success: uploadFileRes => {
          let resData = JSON.parse(uploadFileRes.data);
          this.profileUrl = resData.data.profileUrl;
          this.avatarUrl = resData.data.fullPath + "/" + resData.data.profileUrl;
        },
        fail: (error) => {
          uni.showToast({
            title: error,
            duration: 2000
          });
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },
    onSubmit() {
      if (this.nickName === '') {
        uni.showToast({
          icon: 'none',
          title: '请输入昵称'
        })
        return false;
      }
      uni.$u.throttle(() => request({
        url: `/wxUser/saveUserInformation`,
        method: 'POST',
        data: {
          openid: uni.getStorageSync("miuUserInfo").openid,
          nickName: this.nickName,
          avatarUrl: this.profileUrl
        },
        custom: {
          showError: false,
          showLoading: true,
        }
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        // 更新本地缓存数据
        let tempUserInfo = uni.getStorageSync("miuUserInfo");
        tempUserInfo.nickName = this.nickName
        tempUserInfo.avatarUrl = this.avatarUrl
        uni.setStorageSync("miuUserInfo", tempUserInfo)
        setTimeout(() => {
          uni.navigateBack();
        }, 2500)
      }), 500, true)
    }
  },
  onShow() {
    // 更新用户头像数据
    if (uni.getStorageSync("miuUserInfo").avatarUrl != "") {
      this.avatarUrl = "https://miu-bloom.oss-cn-qingdao.aliyuncs.com/avatar/" + uni.getStorageSync("miuUserInfo").avatarUrl
    } else {
      this.avatarUrl = "https://miu-bloom.oss-cn-qingdao.aliyuncs.com/avatar/defaultImg.jpg"
    }
    this.nickName = uni.getStorageSync("miuUserInfo").nickName
  }
}
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
@import "@/pages-other/info/index.less";
</style>